<template>
	<view class="main">
		<view class="head">
			<view class="head-info">
				<image src="@/static/icon2/g.png" mode="aspectFill"></image>
				<text>订单结算完成!</text>
			</view>
		</view>
		<view class="content">
			<view class="trangle"></view>
			<view class="fabu-button" @click="navigateBack()">返回订单详情</view>
			<!-- <view class="yaoqing-button" @click="yaoqing()">邀请工作</view>
			<view class="yaoqing-tishi">
				<view>邀请他明天继续工作吧！</view>
			</view> -->
		</view>
		<yaoqingAlert v-if="isShowAlert" ref="yaoqingAlert" :text="yaoqingAlertText"></yaoqingAlert>
	</view>
</template>
<script>
	import unit from '@/libs/newUnit.js'
	import yaoqingAlert from '@/components/xjbg/yaoqingAlert.vue'
	export default {
		data() {
			return {
				taskId: 0,
				userid: 0,
				reJitter: false,
				newTaskId: 0,
				yaoqingAlertText: '',
				timer: null,
				isShowAlert: false,
			}
		},
		components: {
			yaoqingAlert,
		},
		methods: {
			pageInit() {},
			navigateBack() {
				let url = `/pages/app-employer/boss-order-detail/boss-order-detail?id=${this.taskId}&taskStatus=3`
				uni.redirectTo({
					url: url
				})
			},
			yaoqing() {
				if (this.reJitter) return
				uni.redirectTo({
					url: '/pages/app-employer/finishInvite/finishInvite?taskId=' + this.taskId + "&fhOne=1"
				})
				return
				let storageTaskId = uni.getStorageSync('release_task_invitation') ? uni.getStorageSync(
					'release_task_invitation') : {}
				let tskId = 'id' + this.taskId
				this.reJitter = true
				if (!Object.keys(storageTaskId).includes(tskId)) {
					let timeflag = 3
					this.yaoqingAlertText = `正在按照当前任务
					生成明天相关任务
					（${timeflag}S）`
					this.isShowAlert = true
					this.timer = setInterval(() => {
						timeflag--
						this.yaoqingAlertText = `正在按照当前任务
						生成明天相关任务
						（${timeflag}S）`
						if (timeflag <= 0) {
							this.isShowAlert = false
							clearInterval(this.timer)
							uni.showToast({
								title: '发布并邀请成功',
								icon: 'none'
							})
						}
					}, 1000)
					unit.release_task_invitation(this.taskId).then(v => {
						this.newTaskId = v.id
						storageTaskId[tskId] = v.id
						uni.setStorageSync('release_task_invitation', storageTaskId)
						unit.invitation_order(this.userid, this.newTaskId, this.taskId)
					})
				} else {
					unit.invitation_order(this.userid, storageTaskId[tskId], this.taskId)
					uni.showToast({
						title: '邀请成功',
						icon: 'none'
					})
				}
				setTimeout(() => {
					this.reJitter = false
					this.navigateBack()
				}, 2000)
			},
		},
		onLoad(value) {
			this.taskId = value.taskId
			this.userid = value.staffid
			this.pageInit()
		},
		onNavigationBarButtonTap() {
			this.isShowKefu = true
		},
	}
</script>
<style lang="less" scoped>
	.head {
		width: 750rpx;
		height: 240rpx;
		background: #FCC928;
	}

	.content {
		width: 750rpx;
		margin-top: -20rpx;
		background: #FFFFFF;
		border-radius: 25rpx 25rpx 0 0;
		height: calc(100vh - 320rpx + 44px);
	}

	.trangle {
		width: 0px;
		height: 0px;
		border: 20rpx solid #FCC928;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		margin: 0 auto;
	}

	.fabu-button {
		margin: 42rpx auto 0 auto;
		width: 690rpx;
		height: 88rpx;
		background: #FCC928;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #402110;
		line-height: 88rpx;
		text-align: center;
	}

	.head-info {
		padding-top: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&>image {
			width: 48rpx;
			height: 48rpx;
		}

		&>text {
			margin-left: 18rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #402110;
			line-height: 45rpx;
		}
	}

	.yaoqing-button {
		margin: 42rpx auto 0 auto;
		width: 690rpx;
		height: 88rpx;
		background: #17C295;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		.anim-AirBubbles;
	}

	.yaoqing-tishi {
		margin: 0 auto;
		width: 364rpx;
		position: relative;

		&>view {
			margin-top: 16rpx;
			width: 364rpx;
			height: 72rpx;
			background: #000000;
			opacity: 0.5;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}

		&>view::after {
			border-left: 16rpx solid transparent;
			border-right: 16rpx solid transparent;
			border-bottom: 16rpx solid #000;
			content: "";
			width: 0;
			position: absolute;
			top: -16rpx;
			left: calc(50% - 8rpx);
		}
	}

	.anim-AirBubbles {
		animation: 1s AirBubbles 0s 1;
	}

	@keyframes AirBubbles {
		0% {
			transform: scale(.9);
		}

		50% {
			transform: scale(1.04);
			;
		}

		100% {
			transform: scale(1);
		}
	}
</style>